<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>通过定时器实现图片的自动切换和关闭效果</title>
	<style type="text/css">
		#pic{
			height:700px;
			width:400px;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var timer; 
            var arrImg=["美女.jpg","1.jpg","th.jpg"];
			var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var btn03=document.getElementById("btn03");
			var pic=document.getElementById("pic");
			var index=0;  
			btn01.onclick=function(){
				clearInterval(timer);  
				timer=setInterval(function(){
					++index;
					index=index%arrImg.length;
					pic.src=index + ".jpg";
				},400);
			};
			btn02.onclick=function(){  
				clearInterval(timer);
			};
            btn03.onclick=function(){  
				clearInterval(timer);
			};
		};
	</script>
</head>
<body>
	<img src="美女.jpg" id="pic"/>
	<br /><br />
	<button id="btn01">开始</button>
	<button id="btn02">停止</button>
</body>
</html>